<template>
    <div>
        <div class="cell" v-for="(item, index) in datas" :key="index">
            <!-- <span class="right last_active_time" v-if="item.last_reply_at !== null">最新动态 {{days(item.last_reply_at)}}</span> -->
            <div class="topic_title_wrapper clear">
                <span class="type_tag type_share left">{{item.tab_value}}</span>
                <router-link :to="'/topic/' + item._id" class="topic_title ellipsis left">{{item.title}}</router-link>
            </div>
            <div class="reply_count right">
                <div class="icons left" title="回复数">
                    <i class="fa fa-comment-o"></i> 
                    <span class="number">{{item.reply_count}}</span>
                </div>
                <div class="icons left" title="点击数">
                    <i class="fa fa-eye"></i> 
                    <span class="number">{{item.visit_count}}</span>
                </div>
                <div class="icons left" title="收藏数">
                    <i class="fa fa-star"></i> 
                    <span class="number">{{item.collect_count}}</span>
                </div>
                <!-- <span class="count_of_replies" title="回复数">{{item.reply_count}}</span>
                <span>/</span>
                <span class="count_of_visits" title="点击数">{{item.visit_count}}</span> -->
            </div>
        </div>
    </div>
</template>

<script>
    import { relativeTime } from "@/config/mUtils"

    export default {
        props:['datas'],
        data() {
            return {
                
            }
        },
        mounted() {

        },
        methods: {
            days(time) {
                return relativeTime(time)
            },
        },
        components: {

        }
    }
</script>

<style lang="scss" scoped >
    @import '../../style/mixin';

    .cell {
        padding: 10px;
        border-top: 1px solid $bold;
        &:hover {
            background-color: $title-bg;
        }
        .topic_title_wrapper {
            padding-right: 100px;
        }
        .last_active_time {
            text-align: right;
            min-width: 50px;
            display: inline-block;
            white-space: nowrap;
            color: $gray;
            font-size: 12px;
        }
        .reply_count {
            margin-top: -20px;
            .icons {
                font-size: 13px;
                padding-right: 5px;
                .number {
                    font-size: 12px;
                }
            }
        }
    }
    
</style>

